var VS_SHADER_RESOURCE = 
    "attribute vec4 a_Position;\n" +
    "void main(){ \n" +
    "   gl_Position = a_Position;\n" +
    // "   gl_PointSize = 10.0;\n" +
    " }\n";

var FS_SHADER_RESOURCE = 
    "void main(){ \n"+
    "   gl_FragColor =  vec4(0.0,0.5,0.0,1.0); \n"+
    "}\n";

function main() {
    var canvas = document.getElementById("canvas_id");
    var gl = getWebGLContext(canvas);
    if(! gl){
        console.error("没有获取到 webgl");
        return;
    }
    if(! initShaders(gl, VS_SHADER_RESOURCE, FS_SHADER_RESOURCE))
    {
        console.error("初始化shader失败");
        return;
    }

    var n = initVertexBuffer(gl);
    if(n > 0){
        gl.clearColor(0.0,0.0,0.0,1.0);
        gl.clear(gl.COLOR_BUFFER_BIT);
        // ----------------------------
        // |
        // |               l_0
        // |
        // |
        // |
        // |
        // |
        // |       l_2                     l1
        // |
        // -----------------------------  l0-l1 多了一个点不成线段则忽略
        // gl.drawArrays(gl.LINES, 0 , n);
        /*
        -----------------------------
        |
        |               l_0
        |
        |
        |
        |
        |
        |       l_2                     l1
        |
        -----------------------------  l0-l1-l2
        */
        // gl.drawArrays(gl.LINE_STRIP, 0 , n);
        // gl.drawArrays(gl.LINE_LOOP, 0 , n);  三角形
        // gl.drawArrays(gl.TRIANGLES, 0 , n);  //实心三角形 颜色用于填充整个三角形面

        //--------------------增加后两个点测试
        // gl.drawArrays(gl.TRIANGLE_STRIP,0 , n);  L0-L1-L2-L3-L2
        gl.drawArrays(gl.TRIANGLE_FAN,0 , n);  //L0-L1-L2 L0-L2-L3

    }
}


function initVertexBuffer(gl){
    var vertexBuffer = gl.createBuffer();
    if(! vertexBuffer){
        return -1;
    }
    var vertexArr = new Float32Array([0.0,0.5,  0.5,-0.5, -0.5,-0.5
        , -1,0.5// 新增两个点测试 三个点时，可注释该点
    ]);
    gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
    gl.bufferData(gl.ARRAY_BUFFER, vertexArr, gl.STATIC_DRAW);
    var a_Position = gl.getAttribLocation(gl.program, "a_Position");
    gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, 0, 0);
    gl.enableVertexAttribArray(a_Position);
    return 4;
}